<script setup lang="ts">
import { onMounted, defineProps } from "vue";
import * as echarts from "echarts";
const prop = defineProps(["className"]);

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(prop.className));
  var sale = [];
  var cnt = [];
  for (var i = 0; i < 6; i++) {
    sale.push((Math.random() * 200).toFixed(2));
    cnt.push((Math.random() * 50).toFixed(2));
  }
  var option = {
    title: {
      text: "ECharts 入门示例",
    },
    legend: {
      right: "20px",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: cnt,
      },
      {
        name: "销售额",
        type: "line",
        data: sale,
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
});
</script>

<template>
  <div :id="className" style="width: 400px; height: 400px"></div>
</template>

<style scoped></style>
